<script setup lang="ts">
import { ref } from "vue";
import { objectSpanMethod } from "@/utils/utils";
import { useRouter } from 'vue-router'
const router = useRouter()

const tableData = ref([
  {
    name: "蔡徐坤",
    gender: "男",
    hobby: "唱歌",
    address: "湖南",
    oldaddress: "湖南",
  },
  {
    name: "陈立农",
    gender: "男",
    hobby: "唱歌",
    address: "北京",
    oldaddress: "台湾",
  },
  {
    name: "范丞丞",
    gender: "男",
    hobby: "跳舞",
    address: "北京",
    oldaddress: "北京",
  },
  {
    name: "杨超越",
    gender: "女",
    hobby: "吃饭",
    address: "哈尔滨",
    oldaddress: "哈尔滨",
  },
]);

const movieData = ref([
  {
    name: "哪吒之魔童降世",
    area: "中国",
    type: "动画",
    one: "50亿",
    two: "100亿",
    three: "150亿",
  },
  {
    name: "哪吒之魔童闹海",
    area: "中国",
    type: "动画",
    one: "20亿",
    two: "40亿",
    three: "40亿",
  },
  {
    name: "复仇者联盟",
    area: "美国",
    type: "科幻",
    one: "100亿",
    two: "200亿",
    three: "300亿",
  },
  {
    name: "复仇者联盟2",
    area: "美国",
    type: "科幻",
    one: "100亿",
    two: "200亿",
    three: "200亿",
  },
  {
    name: "复仇者联盟3",
    area: "美国",
    type: "科幻",
    one: "300亿",
    two: "300亿",
    three: "300亿",
  }
])

const changeSpan = ({ row, column, rowIndex, columnIndex }) => {
  return objectSpanMethod({ row, column, rowIndex, columnIndex }, tableData, [1,2], [0,3])
}

const changeSpan2 = ({ row, column, rowIndex, columnIndex }) => {
  return objectSpanMethod({ row, column, rowIndex, columnIndex }, movieData, [1,2], [1,3,4])
}


</script>

<template>
  <el-card style="padding: 20px;margin-bottom: 60px;">
    <el-table
      :data="tableData"
      style="width: 100%"
      border
      :span-method="changeSpan"
    >
      <el-table-column prop="name" label="姓名" width="180" />
      <el-table-column prop="gender" label="性别" width="180" />
      <el-table-column prop="hobby" label="爱好" />
      <el-table-column prop="address" label="现住址" />
      <el-table-column prop="oldaddress" label="老家" />
    </el-table>
  </el-card>

  <el-card style="padding: 20px;margin-bottom: 60px;">
    <el-table
      :data="movieData"
      style="width: 100%"
      border
      :span-method="changeSpan2"
    >
      <el-table-column prop="name" label="电影名" />
      <el-table-column prop="area" label="地区" />
      <el-table-column prop="type" label="类型" />
      <el-table-column prop="one" label="第一季度票房" />
      <el-table-column prop="two" label="第二季度票房" />
      <el-table-column prop="three" label="第三季度票房" />
    </el-table>
  </el-card>

  <el-button @click="router.back()">返回</el-button>
</template>

<style scoped lang="scss"></style>